<template>
    <div ref="detailBox" class="sdy-detail-box">
        <!-- 轮播图 -->
        <SdyDetailHandler :list="goodsInfo.banners"></SdyDetailHandler>

        <!-- 详细信息 -->
        <div class="sdy-detail">
            <div class="price">
                &yen; {{ goodsInfo.originprice }}.00
            </div>
            <div class="name">
                {{ goodsInfo.proname }}
            </div>
            <div class="desc">
                <span>商品介绍</span>
                {{ goodsInfo.desc }}
            </div>
            <div class="img" v-for="item in goodsInfo.banners" :key="item">
                <img :src="item" alt="">
            </div>
        </div>

        <!-- 加入购物车 -->
        <div class="sdy-detail-footer">
            <van-action-bar>
                <van-action-bar-icon icon="shop-o" text="店铺" />
                <van-action-bar-icon icon="chat-o" text="客服" />
                <van-action-bar-icon to="/cart" icon="cart-o" text="购物车" />
                <van-action-bar-button @click="addCart" type="warning" text="加入购物车" />
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>
        </div>

        <!-- 顶部通栏 -->
        <div ref="detailHeader" class="sdy-detail-header">
            <van-nav-bar left-arrow @click-left="$myRouter.back()" />
        </div>
    </div>
</template>

<script name="sdyDetail" lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import SdyDetailHandler from './components/banner.vue'
import { onMounted, ref } from 'vue';
import { getGoodsDetailHandler } from '../../model/goods'
import { showSuccessToast, showFailToast } from 'vant'
import { addCartHandler } from '../../model/carts'


const $myRoute = useRoute()
const $myRouter = useRouter()

const goodsInfo = ref({ banners: [], originprice: [], proname: [], desc: [] })

// 商品详细信息
const GoodsDetail = async () => {
    const proid = $myRoute.query.proid
    const res = await getGoodsDetailHandler(proid as string)
    if ((res as any).code !== '200') return
    res.data.banners = []
    res.data.banners.push(res.data.img1, res.data.img2, res.data.img3, res.data.img4)
    goodsInfo.value = res.data
}

// 拿到当前盒子
const detailBox = ref()
const detailHeader = ref()

// 准备一个滚动事件的事件处理函数
const scrollHandler = () => {
    // 拿到盒子卷去的高度
    const scrollTop = detailBox.value.scrollTop
    // 拿到元素
    const ele = detailHeader.value

    // 判断 scrollTop 在 0 ~ 140 之间的变化
    if (scrollTop < 140) {
        const opacity: number = scrollTop / 140
        ele.style.opacity = opacity
    } else {
        ele.style.opacity = 1
    }
}

// 加入购物车操作
const addCart = async () => {
    console.log('加入购物车')
    const proid: string = goodsInfo.value.proid
    const userid: string = window.localStorage.getItem('user_id') || ''

    // 判断
    if (!userid) {
        // 提示用户您还没有登录
        showFailToast('您还没有登录')
        return
    }

    const res = await addCartHandler(userid, proid, 1)
    if ((res as any).code !== '200') {
        // 提示用户您还没有登录
        showFailToast('您还没有登录')
        return
    }
    showSuccessToast('加入购物车成功')
}



onMounted(() => {
    GoodsDetail()
    detailBox.value.addEventListener('scroll', scrollHandler)
})

</script>

<style scoped lang="scss">
.sdy-detail-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 50px;
    overflow: auto;
    position: relative;
}

.sdy-detail {

    >.price {
        color: red;
        font-size: 20px;
        padding: 10px;
        box-sizing: border-box;
    }

    >.name {
        font-size: 20px;
        font-weight: bold;
        padding: 10px;
        box-sizing: border-box;
    }

    >.desc {
        font-size: 14px;
        color: #999;
        padding: 10px;
        box-sizing: border-box;

        >span {
            font-weight: bold;
            font-size: 18px;
            color: black;
            display: block;
        }
    }

    >.img {
        width: 100%;
        height: 100%;


        >img {
            width: 100%;
            height: 100%;
            margin-top: 10px;
        }
    }
}

.sdy-detail-footer {
    position: fixed;
    left: 0;
    bottom: 0;
}

.sdy-detail-header {
    width: 100%;
    height: 50px;
    background-color: white;
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0;
}
</style>
